<template>
  <div>
    <div class="head">
      <a @click="$router.push({path: '/'})" class="return"></a>
      <router-link class="operating" tag="span" to="/Register">{{$t('Login.v1')}}</router-link>
    </div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <img class="logo" src="../assets/images/logo.png" alt="">
        <div class="title-hd">{{$t('Login.v2')}}</div>
        <div class="main">
          <van-cell-group>
            <van-field v-model.trim="Account" maxlength="20" :placeholder="$t('Login.v3')" clearable/>
          </van-cell-group>
          <van-cell-group>
            <van-field v-model.trim="Pwd" type="password" :placeholder="$t('Login.v4')" clearable/>
          </van-cell-group>
          <van-cell-group @click.native="isShow">
            <van-field v-model.trim="language" type="language" :placeholder="$t('Login.v5')" disabled
                       :right-icon="right"/>
          </van-cell-group>
        </div>
        <div class="text">
          <flexbox>
            <flexbox-item>
              <div class="flex-demo tal">

              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="flex-demo tar">
                <router-link to="/FindPwd" tag="span">{{$t('Login.v6')}}？</router-link>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
        <div class="btn">
          <van-button :loading="loading" slot="button" size="normal" :loading-text="$t('Login.v7')" type="info" @click.native="Login">
            {{$t('Login.v7')}}
          </van-button>
        </div>
      </div>
    </div>
    <div id="c1"></div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
  </div>
</template>

<script>
    import {base} from './../utils/api';

    let _this;
    export default {
        name: 'Login',
        data() {
            return {
                Account: '', // 账号
                Pwd: '', // 密码
                loading: false,
                k: '', // 凭证K值
                v: '', // 凭证V值
                show: false,
                actions: [{
                    name: 'English',
                    key: 0
                },
                    {
                        name: '简体中文',
                        key: 1
                    },
                    {
                        name: 'Tiếng việt',
                        key: 2
                    }
                ],
                language: '',
                right: 'arrow'
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {
            if (localStorage.getItem("userName")) {
                this.Account = localStorage.getItem("userName");
            }
            if(localStorage.leng == undefined || localStorage.leng == 2){ // 如果之前没有设置语言，或者之前设置的是英语【默认英语】
                this.language = 'English';
                this.$i18n.locale = 'en';
                localStorage.leng = 2;
                this.axios.defaults.headers.common['Language'] = 'en_US';
            }else if(localStorage.leng == 1){
                this.language = '简体中文';
                this.$i18n.locale = 'cn';
                localStorage.leng = 1;
                this.axios.defaults.headers.common['Language'] = 'zh_CN';
            }else if(localStorage.leng == 3){
                this.language = 'Tiếng việt';
                this.$i18n.locale = 'vi';
                localStorage.leng = 3;
                this.axios.defaults.headers.common['Language'] = 'vi_VN';
            }
        },
        methods: {
            isShow() {
                this.show = true;
                this.right = 'arrow-down';
            },
            onSelect(item) { // 语言选择
                // 点击选项时默认不会关闭菜单，可以手动关闭
                this.show = false;
                this.language = item.name;
                this.right = 'arrow';
                switch (item.key) { // 语言选择
                    case 0: // English
                        this.$i18n.locale = 'en';
                        localStorage.leng = 2;
                        this.axios.defaults.headers.common['Language'] = 'en_US';
                        break;
                    case 1: // 简体中文
                        this.$i18n.locale = 'cn';
                        localStorage.leng = 1;
                        this.axios.defaults.headers.common['Language'] = 'zh_CN';
                        break;
                    case 2: // 越南语
                        this.$i18n.locale = 'vi';
                        localStorage.leng = 3;
                        this.axios.defaults.headers.common['Language'] = 'vi_VN';
                        break;
                }
            },
            Login() {
                if (!this.Account) {
                    this.$toast(this.$t('Login.v8'));
                    return false;
                } else {
                    if (this.Account.length < 4 || this.Account.length > 20) {
                        this.$toast(this.$t('Login.v9'));
                        return false;
                    }
                }
                if (!this.Pwd) {
                    this.$toast(this.$t('Login.v10'));
                    return false;
                } else {
                    if (this.Pwd.length < 6 || this.Pwd.length > 20) {
                        this.$toast(this.$t('Login.v11'));
                        return false;
                    }
                }
                if (!this.language) {
                    this.$toast(this.$t('Login.v12'));
                    return false;
                }
                _this.loading = true;
                _this.axios.defaults.headers['Authorization'] = 'mNrNeheLd2NTCxBkgxMASrkNyB4Mb9wRk2qQX2Q5H6h6Q/++ayEFo2o+2IDPV1m0nWbPPFbt3b/rZwAUvMydsmQW+xQ+dLJTzOjlz9tQNKKSC+2iV+1UUiUW74QP3BQBPbyfH/1qdKuwOeXplyjLv3nmWiDys9CCMxPjhDU/qyA=';
                base.getCredentials().then(res => {
                    if (res.code == 8008) {
                        _this.k = res.data.k;
                        _this.v = res.data.v;
                        base.getSignUp({
                            'username': _this.Account,
                            'password': _this.rsaEncrypt(_this.Pwd + ',' + _this.k + ',' + _this.v)
                        }).then(res => {
                            if (res.code == 8008) {
                                // myCaptcha.hide();
                                sessionStorage.token = res.data.access_token;
                                sessionStorage.Account = _this.Account;
                                localStorage.setItem("userName", _this.Account);
                                _this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
                                _this.$router.push({
                                    path: '/'
                                })
                            }
                            _this.loading = false;
                            _this.$toast(res.msg);
                        })
                    }
                })
                // let myCaptcha = _dx.Captcha(document.getElementById('c1'), {
                //     appId: '33ba9ef4612af108f53affd780250e9a', //appId，在控制台中“应用管理”或“应用配置”模块获取
                //     style: 'popup', // 可省略
                //     customLanguage: {
                //         init_inform: _this.$t('Login.v13'),
                //         slide_inform: _this.$t('Login.v14'),
                //         load_fail:  _this.$t('Login.v15'),
                //         loading:  _this.$t('Login.v16'),
                //         pass_by_server	:  _this.$t('Login.v17'),
                //         smart_checking:  _this.$t('Login.v18'),
                //         verify_success:  _this.$t('Login.v19'),
                //         verify_fail:  _this.$t('Login.v20'),
                //         verifying:  _this.$t('Login.v21'),
                //     },
                //     success: function (token) {
                //         _this.axios.defaults.headers['Authorization'] = 'mNrNeheLd2NTCxBkgxMASrkNyB4Mb9wRk2qQX2Q5H6h6Q/++ayEFo2o+2IDPV1m0nWbPPFbt3b/rZwAUvMydsmQW+xQ+dLJTzOjlz9tQNKKSC+2iV+1UUiUW74QP3BQBPbyfH/1qdKuwOeXplyjLv3nmWiDys9CCMxPjhDU/qyA=';
                //         base.getCredentials().then(res => {
                //             if (res.code == 8008) {
                //                 _this.k = res.data.k;
                //                 _this.v = res.data.v;
                //                 base.getSignUp({
                //                     'username': _this.Account,
                //                     'password': _this.rsaEncrypt(_this.Pwd + ',' + _this.k + ',' + _this.v)
                //                 }).then(res => {
                //                     if (res.code == 8008) {
                //                         myCaptcha.hide();
                //                         sessionStorage.token = res.data.access_token;
                //                         sessionStorage.Account = _this.Account;
                //                         localStorage.setItem("userName", _this.Account);
                //                         _this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
                //                         _this.$router.push({
                //                             path: '/'
                //                         })
                //                     } else {
                //                         myCaptcha.hide();
                //                         _this.loading = true;
                //                     }
                //                     _this.$toast(res.msg);
                //                 })
                //             }
                //         })
                //     },
                //     fail: function () {
                //         // 当错误后，重新刷新当前的验证码
                //         myCaptcha.reload();
                //     }
                // })
                // myCaptcha.show(); // 显示验证码控件
                // myCaptcha.on('hide', function () { // 验证码控件被隐藏
                //     _this.loading = true;
                // })
            }
        },
        watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
            Pwd: function () {
                this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
            },
            Account: function () {
                this.Account = this.Account.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
  .header {
    position: relative;
    height: 46px;
  }

  .close {
    position: absolute;
    top: 5px;
    left: 5px;
  }

  .title-hd {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 20px 20px;
  }

  .weui-cells:after {
    left: 15px;
    right: 15px;
  }

  .weui-cells .weui-cell {
    padding: 15px 0;
  }

  .main {
    margin: 0 20px;
    overflow: hidden;
  }

  .btn {
    padding: 30px 20px;
  }

  .text {
    padding: 20px;
    text-align: center;
    font-size: 13px;
  }

  .logo {
    width: 34%;
    display: block;
    margin: 15% auto 5%;
  }

  .yzm {
    /deep/ .weui-cells .weui-cell {
      padding: 5px 0;
    }
  }

  input {
    padding: 15px 10px;
  }

  .head ~ .overlay {
    top: 45px;
  }

  /deep/ .van-cell-group {
    background: none;

    .van-cell {
      background: none;
    }
  }

  /deep/ .van-hairline--top-bottom {
    border: 0;
  }

  /deep/ .van-action-sheet__cancel, .van-action-sheet__item {
    background: #2c3145;
    color: white;
  }

  /deep/ .van-hairline--top::after {
    border: 0;
    border-bottom: 1px solid #70768e;
  }
</style>
